import request from "../../utils/requests";
import React, { useState, useEffect } from 'react';
import "./settle.css"
import {
    Link,
} from "react-router-dom";
import { Avatar, Card } from 'antd';

export default function Settle () {
    const [addressList, setAddressList] = useState([]);
    const [shoppingList, setShoppingList] = useState([]);
    const [pricesum, setPricesum] = useState(0);
    useEffect(async () => {
        const { data } = await request('/address', { method: "GET" })
        if (data.success) {
            setAddressList(data.data)
        }
        let arr = document.querySelectorAll('.ant-card');
        for (let i = 0; i < arr.length; i++) {
            arr[i].onclick = () => {
                for (let j = 0; j < arr.length; j++) {
                    arr[j].className = 'ant-card ant-card-bordered'
                }
                arr[i].className = 'ant-card ant-card-bordered on'
            }
        }
        const userinfo = await request('/shoppingcar/list?id=' + sessionStorage.getItem('data'), { method: "GET" })
        let price = 0;
        userinfo.data.data.map((item)=>{
            price += item.price*item.quantity
        })
        setPricesum(price)
        setShoppingList(userinfo.data.data)
    }, [])
    const onpay = async ()=> {
        let arr = document.querySelectorAll('.on');
        const userinfo = await request('/shoppingcar/pay',{ method: "POST",data:{ress_id:arr[0].id,goods_id:{id:sessionStorage.getItem('data').split(',')},price:pricesum}})
    }
    return (
        <div className="order cart mt">
            <div className="orderCon wrapper clearfix">
                <div className="orderL fl">
                    <h3>收件信息</h3>
                    <div className="addres clearfix">
                        {addressList.map((item) => {
                            if (item.is_default == 0) {
                                return (
                                    <Card key={item.id} className='on' id={item.id}>
                                        <Card.Meta
                                            avatar={<Avatar src={'https://joeschmoe.io/api/v1/random' + item.id} />}
                                            title={item.name + ' ' + item.phone}
                                            description={item.address}
                                        />
                                    </Card>
                                )
                            } else {
                                return (
                                    <Card key={item.id} id={item.id}>
                                        <Card.Meta
                                            avatar={<Avatar src={'https://joeschmoe.io/api/v1/random' + item.id} />}
                                            title={item.name + ' ' + item.phone}
                                            description={item.address}
                                        />
                                    </Card>
                                )
                            }
                        })}

                    </div>
                    <h3>支付方式</h3>
                    <div className="way clearfix">
                        <img className="on" title="支付宝支付" src="img/way01.jpg" onClick={(e) => { e.target.className = 'on'; e.target.parentNode.children[1].className = '' }} />
                        <img src="img/way02.jpg" title="微信支付" onClick={(e) => { e.target.className = 'on'; e.target.parentNode.children[0].className = '' }} />
                    </div>
                </div>
                <div className="orderR fr">
                    <div className="msg">
                        <h3>订单内容<Link to="/shoppingCar"><a href="cart.html" className="fr">返回购物车</a></Link></h3>
                        {shoppingList.map((item) => {
                            return (
                                <ul className="clearfix" key={item.id}>
                                    <li className="fl shoppingsize">
                                        <img src={'/avatars'+item.photo1} />
                                    </li>
                                    <li className="fl">
                                        <p className="text-left">{item.name}</p>
                                        <p className="shoppinglabel text-left">{item.label}</p>
                                        <p id="numbers">数量：{item.quantity}</p>
                                    </li>
                                    <li className="fr">￥{item.price}</li>
                                </ul>
                            )
                        })}
                    </div>
                    <div className="tips">
                        <p><span className="fl">商品金额：</span><span className="fr">￥{pricesum}</span></p>
                        <p><span className="fl">优惠金额：</span><span className="fr">￥0.00</span></p>
                        <p><span className="fl">运费：</span><span className="fr">免运费</span></p>
                    </div>
                    <div className="count tips">
                        <p><span className="fl">合计：</span><span className="fr">￥{pricesum}</span></p>
                    </div>
                    <a className="pay" onClick={onpay}>去支付</a>
                </div>
            </div>
        </div>
    )
}
